<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>压浆数据交换平台</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/css/skin.css" media="all">
    <link rel="stylesheet" href="layui/css/table.css" media="all">

    <style>
        /*   .layui-form-select dl dd.layui-this {
               background: #FFB800;
           }

           .layui-laypage .layui-laypage-curr .layui-laypage-em {
               background-color: #f09500
           }

           .searchInput {
               width: 350px;
           }*/
        #bridgeCodes {
            margin-left: 10%;
            margin-top: 20px;
        }

        #searchs, #searchb {
            margin-top: 20px;

        }

    </style>
</head>
<body>
<div class="bup-header clear">
    <div class="bup-logo"><img src="image/bup-logo.png"/></div>
    <div class="bup-title">
        <h3>压浆数据交换平台</h3>
    </div>

</div>
<div class="table_div">
    <div id="searchParam">
        <div class="layui-form-item">
            <div class="layui-input-inline" id="bridgeCodes">
                <input type="text" id="bridgeCode" class="layui-input" autocomplete="off" placeholder="请输入梁号">
            </div>
            <div class="layui-input-inline layui-form" id="searchs">
                <select id="state">
                    <option value="">请选择状态</option>
                    <option value="0">上传失败</option>
                    <option value="1">已上传</option>
                    <option value="2">未上传</option>
                </select>
            </div>
            <div class="layui-input-inline " id="searchb">
                <button class="layui-btn" onclick="search()" id="search">查询</button>
                <!-- 新增重置查询按钮 -->
                <button class="layui-btn layui-btn-primary" onclick="resetSearch()" id="resetSearch">重置查询</button>
            </div>
            <!--   <div class="layui-input-inline ">
                   <button class="layui-btn" id="tz">跳转</button>
               </div>-->
        </div>

    </div>

    <table class="layui-table" id="uploadTable" lay-filter="uploadTable"></table>
</div>
<div id="main" style="width: 450px;height:300px; display: none;"></div>
<div class="layui-form-item" id="uploadParameter" style="display: none">
    <form class="layui-form" id="book" method="post" lay-filter="book">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">施工单位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sgdw" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">监理单位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="jldw" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">合同号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="htbh" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">工程名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="gcmc" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">桩号及部位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="zhbw" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">施工部位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sgbw" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">构件结构</label>
                    <div class="layui-input-inline">
                        <input type="text" name="gjjg" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">掺减水剂量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="cjsjl" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">掺膨胀剂量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="cpzjl" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">水温</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sw" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">水泥用量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="snyl" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">泌水率</label>
                    <div class="layui-input-inline">
                        <input type="text" name="msl" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配合比(水泥:添加剂:水)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phb" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>



            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">梁板类型</label>
                    <div class="layui-input-inline">
                        <input type="text" name="lblx" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">张拉时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="zlsj" id="zlsj" placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">压浆剂</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yajiangji" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">水泥名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="snmc" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">孔道数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="kongdaoshu" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">压浆方向</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yajiangfangxiang" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">压浆步骤</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yajiangbuzhou" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">压浆过程</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yajiangguocheng" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">进浆量L</label>
                    <div class="layui-input-inline">
                        <input type="text" name="jinjiangshuliang" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">返浆量L</label>
                    <div class="layui-input-inline">
                        <input type="text" name="fanjiangliang" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">值班人员</label>
                    <div class="layui-input-inline">
                        <input type="text" name="memo" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否完成</label>
                    <div class="layui-input-block" style="width: 45%;">
                        <select name="status" id="status">
                            <option value="0">未完成</option>
                            <option value="1">试验完成</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备用</label>
                    <div class="layui-input-inline">
                        <input type="text" name="beiyong" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="layui-form-item" id="addData" style="display: none">
    <form class="layui-form" id="addBook" method="post" lay-filter="addBook">
        <div class="layui-form-item">
            <label class="layui-form-label">梁号</label>
            <div class="layui-input-inline">
                <input type="text" name="bridgeCode" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">孔号</label>
            <div class="layui-input-inline">
                <input type="text" name="ductCode" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">压浆时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="mudjackDate" id="mudjackDate" placeholder="yyyy-MM"autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="beginTime" id="beginTime" placeholder="HH:mm:ss"autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="endTime" id="endTime" placeholder="HH:mm:ss"autocomplete="off">
            </div>
        </div>
    </form>
</div>

</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="edit">设置上传参数</button>
        <button class="layui-btn layui-btn-sm" lay-event="upload">上传</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="chart">打开</a>
</script>
</body>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="layui/echarts.min.js"></script>

<script type="text/javascript" src="layui/jquery.min.js"></script>
<script>
    var uploadTable;
    layui.use(['table', 'layer', 'laydate', 'form'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        uploadTable = table.render({
            elem: '#uploadTable'
            , url: '/NettyTcpServer/yj/findAll'
            , method: 'POST'
            , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'print', 'exports']
            , cols: [[
                {type: 'checkbox'}
                , {field: 'device_code', title: '设备编号', align: "center", width: 180}
                , {field: 'bridge_code', title: '梁号', align: "center", width: 180, edit: 'text'}
                , {field: 'duct_code', title: '孔道号', align: "center", width: 80, edit: 'text'}
                , {field: 'mudjack_date', title: '压浆日期', align: "center", width: 180, edit: 'text'}
                , {field: 'begin_time', title: '开始时间', align: "center", width: 95, edit: 'text'}
                , {field: 'end_time', title: '结束时间', align: "center", width: 95, edit: 'text'}
                , {field: 'mudjack_pressure', title: '进浆压力', align: "center", width: 95, edit: 'text'}
                , {field: 'slurry_pressure', title: '出浆压力', align: "center", width: 95, edit: 'text'}
                , {field: 'stabilize_pressure', title: '稳压压力', align: "center", width: 95, edit: 'text'}
                , {field: 'pressurize_time', title: '保压时间', align: "center", width: 95, edit: 'text'}
                , {field: 'water_binder_ratio', title: '实测水胶比', align: "center", width: 110, edit: 'text'}
                , {field: 'theory_volume', title: '理论体积', hide: false, align: "center", width: 95, edit: 'text'}
                , {field: 'practical_volume', title: '实测体积', align: "center", width: 95, edit: 'text'}
                , {field: 'practical_mudjack_value', title: '实测浆料体积', align: "center", width: 120, edit: 'text'}
                , {field: 'practical_water_value', title: '实测水体积', align: "center", width: 110, edit: 'text'}
                , {field: 'environment_temperature', title: '环境温度', align: "center", width: 95, edit: 'text'}
                , {field: 'slurry_temperature', title: '浆液温度', align: "center", width: 95, edit: 'text'}
                , {field: 'practical_fluidity', title: '实测流动度', align: "center", width: 110, edit: 'text'}
                , {
                    field: 'state',
                    title: '状态',
                    fixed: 'right',
                    align: "center",
                    width: 80,
                    edit: 'text',
                    templet: function (item) {
                        if (item.state == '0') {
                            return "上传失败";
                        } else if (item.state == '1') {
                            return "已上传";
                        } else if (item.state == '2') {
                            return "未上传";
                        }
                    }
                }, {fixed: 'right', title: '曲线图', align: "center", toolbar: '#barDemo', width: 90}
            ]]
            , page: true
            , limit: '30'
            , height: 'full-200'
            , where: {
                "device_code": "2025042701"
            }

        });
        //监听单元格编辑
        table.on('edit(uploadTable)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            // layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + value);
            $.post("/NettyTcpServer/yj/update", {"id": data.id, "field": field, "value": value}, function (obj) {
                layer.msg(obj, {time: 1000}, function () {
                });
            })
        });

        //日期时间选择器
        laydate.render({
            elem: '#zlsj'
            , type: 'datetime'
        });
        //日期时间选择器
        laydate.render({
            elem: '#mudjackDate'

        });

        //时间选择器
        laydate.render({
            elem: '#beginTime'
            ,type: 'time'
        });
        //时间选择器
        laydate.render({
            elem: '#endTime'
            ,type: 'time'
        });
        table.on('tool(uploadTable)', function (obj) {
            //console.log(obj)
            if (obj.event === 'chart') {
                // console.log(obj.data.bridge_code);
                var bridge_code = obj.data.bridge_code;
                var duct_code = obj.data.duct_code;
                var date = [];
                var data = [];
                $.post("/NettyTcpServer/yj/graph", {id: obj.data.id}, function (obj) {
                    for (var i = 0; i < obj.dateList.length; i++) {
                        date.push(obj.dateList[i])
                    }
                    for (var j = 0; j < obj.mcgList.length; j++) {
                        data.push(obj.mcgList[j])
                    }
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: bridge_code + '--' + duct_code + '折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['压力']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '压力',
                                type: 'line',
                                stack: '总量',
                                data: data
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    layer.open({
                        type: 1,
                        // title: "用户基本信息",
                        area: ['500px', '400px'],//窗口大小
                        content: $("#main"),
                        end: function () {
                            $("#main").css('display', 'none');
                        }
                    })
                })

            }
        });
        //表头工具
        table.on('toolbar(uploadTable)', function (obj) {
            switch (obj.event) {
                case 'upload':
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要上传的列");
                    } else {
                        var ids = [];
                        $(data).each(function (index, item) {
                            ids.push(item.id);
                        });
                        tipDialog(ids);
                    }
                    break;
                case 'edit':
                    layer.open({
                        type: 1,
                        title: "信息",
                        area: ['40%', '50%'],//窗口大小
                        btn: ['确定', '取消'],//按钮
                        content: $("#uploadParameter"),
                        success: function (layero, index) {
                            // 解决按enter键重复弹窗问题
                            $(':focus').blur();
                            // 添加form标识
                            layero.addClass('layui-form');
                            // 将保存按钮改变成提交按钮
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter': 'book',
                                'lay-submit': ''
                            });
                            $.post("/NettyTcpServer/yj/showParameter", {id: "44"}, function (obj) {
                                $('[name="shebeibianhao"]').val(obj.shebeibianhao),
                                    $('[name="sgdw"]').val(obj.sgdw),
                                    $('[name="jldw"]').val(obj.jldw),
                                    $('[name="htbh"]').val(obj.htbh),
                                    $('[name="gcmc"]').val(obj.gcmc),
                                    $('[name="zhbw"]').val(obj.zhbw),
                                    $('[name="sgbw"]').val(obj.sgbw),
                                    $('[name="gjjg"]').val(obj.gjjg),
                                    $('[name="cjsjl"]').val(obj.cjsjl),
                                    $('[name="cpzjl"]').val(obj.cpzjl),
                                    $('[name="sw"]').val(obj.sw),
                                    $('[name="snyl"]').val(obj.snyl),
                                    $('[name="msl"]').val(obj.msl),
                                    $('[name="phb"]').val(obj.phb),

                                    $('[name="beiyong"]').val(obj.beiyong),
                                    $('[name="lblx"]').val(obj.lblx),
                                    $('[name="zlsj"]').val(obj.zlsj),
                                    $('[name="yajiangji"]').val(obj.yajiangji),
                                    $('[name="snmc"]').val(obj.snmc),
                                    $('[name="kongdaoshu"]').val(obj.kongdaoshu),
                                    $('[name="yajiangfangxiang"]').val(obj.yajiangfangxiang),
                                    $('[name="yajiangbuzhou"]').val(obj.yajiangbuzhou),

                                    $('[name="yajiangguocheng"]').val(obj.yajiangguocheng),
                                    $('[name="memo"]').val(obj.memo),
                                    $('[name="jinjiangshuliang"]').val(obj.jinjiangshuliang),
                                    $('[name="fanjiangliang"]').val(obj.fanjiangliang),
                                    $('[name="uuid"]').val(obj.uuid),
                                    $('[name="status"]').val(obj.status)
                                form.render('select');
                            });
                            // 刷新渲染(否则开关按钮会不显示)
                            form.render();
                        },
                        yes: function (index, layero) {
                            // 监听提交按钮
                            form.on('submit(book)', function (data) {
                                console.log("aaa");
                                $.ajax({
                                    type: "post",
                                    url: "/NettyTcpServer/yj/updateParameter",
                                    data: {
                                        id: 44,
                                        shebeibianhao: $('[name="shebeibianhao"]').val(),
                                        sgdw: $('[name="sgdw"]').val(),
                                        jldw: $('[name="jldw"]').val(),
                                        htbh: $('[name="htbh"]').val(),
                                        gcmc: $('[name="gcmc"]').val(),
                                        zhbw: $('[name="zhbw"]').val(),
                                        sgbw: $('[name="sgbw"]').val(),
                                        gjjg: $('[name="gjjg"]').val(),
                                        cjsjl: $('[name="cjsjl"]').val(),
                                        cpzjl: $('[name="cpzjl"]').val(),
                                        sw: $('[name="sw"]').val(),
                                        snyl: $('[name="snyl"]').val(),
                                        msl: $('[name="msl"]').val(),
                                        phb: $('[name="phb"]').val(),
                                        beiyong: $('[name="beiyong"]').val(),
                                        lblx: $('[name="lblx"]').val(),
                                        zlsj: $('[name="zlsj"]').val(),
                                        yajiangji: $('[name="yajiangji"]').val(),
                                        snmc: $('[name="snmc"]').val(),
                                        kongdaoshu: $('[name="kongdaoshu"]').val(),
                                        yajiangfangxiang: $('[name="yajiangfangxiang"]').val(),
                                        yajiangbuzhou: $('[name="yajiangbuzhou"]').val(),
                                        yajiangguocheng: $('[name="yajiangguocheng"]').val(),
                                        memo: $('[name="memo"]').val(),
                                        uuid: $('[name="uuid"]').val(),
                                        status: $('[name="status"]').val()
                                    }, success: function (obj) {
                                        layer.msg(obj, {time: 1000}, function () {
                                            layer.close(index);
                                        });
                                    }
                                });
                            })
                        }, end: function () {
                            $("#uploadParameter").css('display', 'none');
                        }
                    });
                    break;
                case 'add':
                    layer.open({
                        type: 1,
                        title: "信息",
                        area: ['30%', '50%'],//窗口大小
                        btn: ['确定', '取消'],//按钮
                        content: $("#addData"),
                        success: function (layero, index) {
                            // 解决按enter键重复弹窗问题
                            $(':focus').blur();
                            // 添加form标识
                            layero.addClass('layui-form');
                            // 将保存按钮改变成提交按钮
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter': 'addBook',
                                'lay-submit': ''
                            });

                            // 刷新渲染(否则开关按钮会不显示)
                            form.render();
                        },
                        yes: function (index, layero) {
                            // 监听提交按钮
                            form.on('submit(addBook)', function (data) {
                                // console.log("aaa");
                                $.ajax({
                                    type: "post",
                                    url: "/NettyTcpServer/jgaeb/add",
                                    data: {
                                        deviceCode : '2025042701',
                                        bridgeCode: $('[name="bridgeCode"]').val(),
                                        ductCode: $('[name="ductCode"]').val(),
                                        mudjackDate: $('[name="mudjackDate"]').val(),
                                        beginTime: $('[name="beginTime"]').val(),
                                        endTime: $('[name="endTime"]').val()
                                    }, success: function (obj) {
                                        layer.msg(obj, {time: 1000}, function () {
                                            layer.close(index);
                                        });
                                    }
                                });
                            })
                        }, end: function () {
                            $("#addData").css('display', 'none');
                            parent.location.reload();
                        }
                    });
                    break;
            }
        });

    });

    //删除
    var tipDialog = function (ids) {
        layer.open({
            content: "确定要上传么?",
            yes: function (index, layero) {
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                MaskUtil.mask("正在上传中，请稍等...");
                $.post("/NettyTcpServer/cgybyhz/upload", {"ids": ids}, function (obj) {
                    // var data = jQuery.parseJSON(obj);
                    MaskUtil.unmask();
                    layer.msg(obj.responseContent, {time: 1000}, function () {
                        search();
                    });
                });
            }
        });
    };


    //执行查询
    function search() {
        //这里以搜索为例
        uploadTable.reload({
            where: { //设定异步数据接口的额外参数，任意设
                device_code: "2025042701",
                bridgeCode: $("#bridgeCode").val(),
                state: $('#state option:selected').val()//选中的值
            },
            page: {
                curr: 1 //重新从第 1 页开始
            }
        })
    }

    // 重置查询功能
    function resetSearch() {
        // 清空梁号输入框
        $("#bridgeCode").val("");
        // 重置状态选择框为默认值
        $("#state").val("");
        layui.form.render("select");
        // 刷新表格，重置查询条件
        uploadTable.reload({
            where: {
                device_code: "2025042701",
                bridgeCode: "",
                state: ""
            },
            page: {
                curr: 1 // 重新从第 1 页开始
            }
        });
    }

    var MaskUtil = (function () {
        var $mask, $maskMsg;
        var defMsg = '正在处理，请稍待。。。';

        function init() {
            if (!$mask) {
                $mask = $("<div></div>")
                    .css({
                        'position': 'absolute'
                        , 'left': '0'
                        , 'top': '0'
                        , 'width': '100%'
                        , 'height': '100%'
                        , 'opacity': '0.3'
                        , 'filter': 'alpha(opacity=30)'
                        , 'display': 'none'
                        , 'background-color': '#ccc'
                    })
                    .appendTo("body");
            }
            if (!$maskMsg) {
                $maskMsg = $("<div></div>")
                    .css({
                        'position': 'absolute'
                        , 'top': '50%'
                        , 'margin-top': '-20px'
                        , 'padding': '5px 20px 5px 20px'
                        , 'width': 'auto'
                        , 'border-width': '1px'
                        , 'border-style': 'solid'
                        , 'display': 'none'
                        , 'background-color': '#ffffff'
                        , 'font-size': '14px'
                    })
                    .appendTo("body");
            }
            $mask.css({width: "100%", height: $(document).height()});
            var scrollTop = $(document.body).scrollTop();
            $maskMsg.css({
                left: ($(document.body).outerWidth(true) - 190) / 2
                , top: (($(window).height() - 45) / 2) + scrollTop
            });
        }

        return {
            mask: function (msg) {
                init();
                $mask.show();
                $maskMsg.html(msg || defMsg).show();
            }
            , unmask: function () {
                $mask.hide();
                $maskMsg.hide();
            }
        }
    }());
</script>
</html>